<template>
    <div>
        <div class="logo">
            <img src="../assets/logo-nobg-nopj.png" width="100" height="100" />
        </div>
        <div>
            <el-form>
                <el-form-item label="注册账号">
                    <el-input placeholder="请输入注册账号" v-model="username" />
                </el-form-item>
                <el-form-item label="注册密码">
                    <el-input placeholder="请输入注册密码" v-model="password" show-password />
                </el-form-item>
                <el-form-item label="重复密码">
                    <el-input placeholder="请再次输入密码" v-model="password_confirm" show-password />
                </el-form-item>       
                <hr/>
                <el-form-item  label-width="0" class="form-button-center">
                    <el-button class="button-centerd" type="primary" @click="onSubmit">立即创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script>
  export default {
    data(){
        return {
            username:"",
            password:"",
            password_confirm:""    
        }
    },
    methods:{
        onSubmit(){
            console.log(this.data)
            if(this.data.password_confirm != this.data.password){
                this.$message({
                    message: '警告哦，这是一条警告消息',
                    type: 'warning'
                });
            }
        }
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background:linear-gradient(to bottom,#ffeeee,#ddefbb)')
    },

    beforeDestroy() {
        document.querySelector('body').removeAttribute('style')
    },
  }
  
</script>

<style scoped>
    .button-centerd{
        display: block;
        margin:auto ;
    }
</style>